<template>
  <div class="headerimg">
    <div class="headerimg-content">
      <div class="headerimg-content-img">
        <slot name="img"></slot>
      </div>
      <div class="headerimg-content-Listtxt">
        <ul class="headerimg-content-txt-ul">
          <li class="headerimg-content-txt-li" v-for="(item, index) in 8" :key="index">10大维新美学</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props:{
      listinfo:Array
  }
};
</script>
    
<style lang="scss">
.headerimg {
  .headerimg-content {
    position: relative;
    .headerimg-content-Listtxt {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: 0px auto;
      height: 68px;
      text-align: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #080608;
      opacity: 0.8;
      .headerimg-content-txt-ul {
          height: 100%;
          line-height: 100%;
          justify-content: center;
          display: flex;
        .headerimg-content-txt-li {
          padding-right: 8px;
          padding-left: 8px;
          width: 100px;
          height: 16px;
          margin-top: 26px;
          line-height: 16px;
          color: #080608;
          border-right: solid 1px #fff;
          color: #fff;
        }
      }
    }
  }
}
</style>